<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>React Demo</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	<style>
		body {
      margin: 0;
			background-color: #66ccff;
		}
    #root {
      padding: 10px;
    }

    .main__form {
      display: flex;
      align-items: center;
    }
		.main__form-input {
			padding: 5px;
			border: 1px solid #fff;
			font-size: 16px;
		}
		.main__form-button {
      height: 30px;
			border-style: none;
			font-size: 16px;
			color: #fff;
      line-height: 30px;
			background-color: #0066ff;
		}
		.main__form-button:hover {
			background-color: #003399;
			cursor: pointer;
		}

		.todo-list {
			padding: 0;
			list-style: none
		}
		.todo-list li {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15px;
			padding: 10px 15px;
			border-radius: 5px;
			color: #333;
			background-color: rgba(255, 255, 255, .5);
		}
    .todo-list span {
      cursor: pointer;
    }
    .todo-list .completed {
      text-decoration: line-through;
    }
		
    .main-footer {
      display: flex;
      align-items: center;
      height: 50px;
    }

	</style>
</head>
<body>
   <div id="root"></div>
   
   <script type="text/babel">
    class List extends React.Component {
			render() {
        const { data, onDelete, onCompleted } = this.props;
				return (
					<ul className='todo-list'>
						{data.map(({value, completed},index) => {
              return (
                <li key={index}>
                  <span className={completed? 'completed': ''} onClick={() => onCompleted(index)}>{value}</span>
						      <span onClick={() => onDelete(index)}>&times;</span>
                </li>
              )
            })}
					</ul>
				);
			}
		}
				
		class Main extends React.Component {
			constructor(props) {
				super(props);
				this.state = {
					list: [],
          data: [],
          tab: 'all'
				};

        // 创建 Refs
				this._input = React.createRef();
			}

      shouldComponentUpdate(nextProps, nextState) {
        const { tab: val, list, data } = this.state;
        const { tab: newVal } = nextState;
        if(val !== newVal) {
          let newData = []
          if(newVal === 'active') {
            newData = list.filter(item => item.completed === false);
          }else if(newVal === 'completed') {
            newData = list.filter(item => item.completed === true);
          }else {
            newData = list;
          }
          this.setState({
            data: newData
          });
          return false;
        }
        return true;
      }

			addItem = (e) => {
        // 通过 Refs 获取真实的 DOM 节点
        const el = this._input.current;
        const { value } = el;
        const { list } = this.state;
        if(value) {
          const newArr = list.concat([{
            value,
            completed: false
          }]);
          this.setState({
            data: newArr,
            list: newArr
          });
          el.value = '';
        }
				el.focus();
				e.preventDefault();
			}

      changeCompletedVal = (id) => {
        const { list } = this.state;
        const newArr = list.map((item, index) => {
          if(index === id) {
            return {
              ...item,
              completed: !item.completed
            };
          }
          return item
        });
        this.setState({
          data: newArr,
          list: newArr
        });
      }

      delItem = (id) => {
        const { list } = this.state;
        const newArr = list.filter((item, index) => index !== id);
        this.setState({
          data: newArr,
          list: newArr
        });
      }

      handleToFilter = (tab) => {
        this.setState({
          tab
        });
      }

			render() {
        const { list, data } = this.state;
				return (
					<div className='main'>
            <form className="main__form" onSubmit={this.addItem}>
              <input className="main__form-input" type="text" placeholder='请输入一个任务' ref={this._input} />
              <button className="main__form-button" type="submit">添加</button>
            </form>
						<List data={data} onDelete={this.delItem} onCompleted={this.changeCompletedVal} />
						<div className="main-footer">
							<label>筛选：</label>
							<button type="button" onClick={() => this.handleToFilter('all')}>All</button>
							<button type="button" onClick={() => this.handleToFilter('active')}>Active</button>
							<button type="button" onClick={() => this.handleToFilter('completed')}>Completed</button>
						</div>
					</div>
				)
			}
		}
		
		class App extends React.Component {
			render() {
				return (
					<Main />
				);
			}
		}

   	ReactDOM.render(
			<App></App>,
			document.querySelector('#root')
		);
  </script>
</body>
</html>